<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>登录页面</title>
</head>

<body>
  <h1>用户登录</h1>
  用户名：<input name="userName" type="text" id="userName"><br>
  密码：<input name="password" type="password" id="password"><br>
  <input type="button" value="登录" onclick="login()">
  
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script>
    function login() {//当点击登录的时候onclick调用function中的login
      //ajax请求包含路径类型，访问成功...，访问失败.....
      //格式   $.ajax({})  括号里面是一个对象
      $.ajax({
        url:"/user/login",//这里才是真正的调用后端
        type:"post",
        data:{  // data接收参数
          userName: $("#userName").val(),
          password: $("#password").val()
        },//以上是发送请求,响应成功

        //回调函数function内部有一个内置的参数用来接收后端的响应
        success:function (result){//result参数接收响应结果
          if(result){
            location.href = "/index.html"
          }else{
            alert("账号密码有误");//弹框
          }
        }


      })
    
    }

  </script>
</body>

</html>